<!--
 * @Description: 
 * @Date: 2023-03-16 10:34:19
 * @LastEditors: czp
 * @LastEditTime: 2023-05-08 17:22:04
-->
<template>
	<div class="box">
		<base-swiper width="100%" height="17.18rem" :img-list="detail.bannerList" />
		<div class="info">
			<div class="name">{{ detail.name }}</div>
			<el-button class="btn" color="#8A1313">
				<a :href="detail.href" target="_blank" style="color: #ffffff; text-decoration: none"> {{ $t("index.more") }} </a>
			</el-button>
		</div>
	</div>
</template>
<script setup lang="ts" name="JiuDianItem">
import BaseSwiper from "~V/components/BaseSwiper/index.vue";
defineProps<{ detail: { name: string; bannerList: string[]; href?: string } }>();
</script>
<style lang="scss" scoped>
.box {
	display: flex;
	flex-direction: column;
	width: 31%;
	margin-right: 3%;
	margin-bottom: 40px;
	overflow: hidden;
	&:nth-child(3n) {
		margin-right: 0;
	}
	.info {
		display: flex;
		flex: 1;
		justify-content: space-between;
		padding: 20px 0;
		.name {
			font-size: 20px;
			font-weight: bold;
			color: rgb(25 25 25 / 100%);
		}
		.btn {
			width: 116px;
			border-radius: 0;
		}
	}
}

@media all and (max-width: 750px) {
	.box {
		width: 100%;
		margin: 0;
	}
}
</style>
